<template>
    <div class="body">
        <!-- <h3>goodDetails-{{ id }}</h3> -->
        <!-- 商品详情轮播图 -->
        <div class="lunbo" @click="preview">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in goodsImg" :key="index">
                    <img :src="item.src" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 商品详情价格优惠价格标题 -->
        <div class="bigpic">
            <div class="pic" style="display: table;">
                <span class="yhpic">&yen; {{ goodsInfo.sell_price }}</span>
                <span class="ypic">&yen; {{ goodsInfo.market_price }}</span>
            </div>
            <div class="title van-multi-ellipsis--l2">
                <div>{{ goodsInfo.title }}</div>
            </div>
        </div>
        <div class="introduceText">
            <h3 class="jianjie">简介</h3>
            <div class="content" v-html="goodsInfo.content"></div>
            <!-- <p>{{ goodsInfo.zhaiyao }} -->
        </div>
        <div class="DB">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="callPhone" />
                <van-goods-action-icon @click="$router.push('/shopcar')" icon="cart-o" text="购物车"
                    :badge="$store.getters.getCarTotalNumber" />

                <van-goods-action-button color="#22272e" type="warning" text="加入购物车" @click="openSku(true)" />
                <van-goods-action-button color="#000111" type="danger" text="立即购买" @click="openBuy(false)" />
            </van-goods-action>
            <!-- 商品sku -->
            <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsInfo.id" :hide-stock="sku.hide_stock"
                :reset-stepper-on-hide="true" :show-add-cart-btn="showAddCartBtn" @add-cart="skuAddCart"
                @buy-clicked="skuBuy">
                <template #sku-messages>
                    <div class="card">
                        <van-divider>数据</van-divider>
                        <div>商品货号：{{ goodsInfo.goods_no }}</div>
                        <div>库存：{{ goodsInfo.stock_quantity }}件</div>
                        <div>上架时间：{{ goodsInfo.add_time | dateFormat('YYYY-MM-DD') }}</div>
                        <!-- #22272e #000111 -->
                    </div>
                </template>
            </van-sku>
        </div>
    </div>
</template>

<script>
import { fetchGoodsImages, fetchGoodsInfo } from '../api/index.js'
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            id: this.$route.params.id,
            show: false, // 显示sku的弹窗
            showAddCartBtn: true, // 是否显示sku中加入购物车的按钮
            goodsImg: [],
            goodsInfo: {},
            sku: {
                // 数据结构见下方文档
                tree: [],
                price: "879.00", // 默认价格（单位元）
                stock_num: 18, // 商品总库存
                hide_stock: false, // 是否隐藏剩余库存
            },
            goods: {
                // 数据结构见下方文档
                picture: ""
            }
        }
    },
    created() {
        this._fetchGoodsImages(),
            this._fetchGoodsInfo()
    },
    methods: {
        async _fetchGoodsImages() {
            let { message } = await fetchGoodsImages(this.id)
            this.goodsImg = message
            this.goods.picture = message.length && message[0].src
        },
        async _fetchGoodsInfo() {
            let { message } = await fetchGoodsInfo(this.id)
            this.goodsInfo = message
        },
        preview() {
            // 图片预览
            let imgs = this.goodsImg.map(item => item.src);
            ImagePreview({
                images: imgs,
                startPosition: 1,
            });
        },
        callPhone() {
            // 询问
            this.$dialog.confirm({
                title: '拨打电话',
                message: '确认要联系客服吗',
            })
                .then(() => {
                    // on confirm
                    window.location.href = "tel://" + 13413132233;
                })
                .catch(() => {
                    // on cancel
                });

        },
        openSku(showAddCartBtn) {
            // 显示sku,加入购物车按钮
            this.show = true;
            this.showAddCartBtn = showAddCartBtn;
        },
        openBuy(showAddCartBtn) {
            // 显示sku
            this.show = true;
            this.showAddCartBtn = showAddCartBtn;
        },
        skuAddCart(skudata) {
            // console.log(skudata)
            let { goodsId, selectedNum } = skudata
            let { sell_price } = this.goodsInfo;
            let cartItem = { id: goodsId, number: selectedNum, sell_price, selected: true }
            // 到vuex进行本地存储
            console.log(cartItem)
            this.$store.commit('addGoodsToCar', cartItem)
            this.show = false; // 隐藏sku弹窗

        },
        skuBuy(skudata) {
            console.log(skudata)
        },
    },

}
</script>

<style lang="scss" scoped>
.body {
    height: 100vh;
    background: rgba(234, 231, 231, 0.368627451);
    padding: 10px 10px;

}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.bigpic {
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    padding: 8px;
}

.yhpic {
    color: #fa865d;
    font-size: 20px;
    margin-right: 20px;
}

.ypic {
    color: #666;
    font-size: 14px;
}

.introduceText {
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    padding: 8px;

    .content {
        color: #666;
        margin-bottom: 35px;

        ::v-deep table {
            width: 100%;
            height: 100%;
        }

        ::v-deep img {
            width: 100%;
            height: 100%;
        }
    }
}

::v-deep .van-sku-actions .van-button--warning {
    background: #22272e;
}
::v-deep .van-sku-actions .van-button--danger {
    background: #000111;
}
</style>